<template>
  <view class="work-container">
    <view class="top">
      <text class="title">
        {{ detail.title }}
      </text>
      <view class="flex-row">
        <view class="container">
          <image src="../../static/images/news/case.png" class="logo"></image>
          <text>{{ detail.typeName }}</text>
        </view>
        <view class="container">
          <image src="../../static/images/news/time.png" class="logo"></image>
          <text>{{ detail.createTime }}</text>
        </view>
      </view>
    </view>
    <view class="content">
      <rich-text :nodes="detail.content"></rich-text>
    </view>
    <view class="bottom">
      <view class="container">
        <image src="../../static/images/news/eyes.png" class="logo"></image>
        <text>{{ detail.num || 0 }}</text>
      </view>
      <view class="container" style="margin-left: 40rpx" @click="share">
        <image src="../../static/images/news/share.png" class="logo"></image>
        <button open-type="share" class="btn"><text>分享</text></button>
      </view>
    </view>
  </view>
</template>
    
    <script>
import { shareMixins } from "@/mixins/share";
import {isEmptyString} from "@/utils/common";
export default {
  mixins: [shareMixins],
  data() {
    return {
      id: "",
      detail: {},
      shareData: {
        title: "",
        path: "/pages/news/detail?id=" + this.id, // 分享的页面路径
      },
    };
  },
  onLoad(params) {
    this.id = params.id;
    if(!isEmptyString(params.classifyNameId)){
      uni.$emit('classifyNameId', params.classifyNameId)
    }
    this.getDetail();

  },
  methods: {
    getDetail() {
      this.$store.dispatch("GetNewsDetail", this.id).then((res) => {
        console.log(res);
        this.detail = res.data;
        this.detail.content = this.detail.content.replace(
          /\<img/gi,
          '<img style="max-width:100%;height:auto;display:block;"'
        );
        if (
          this.detail.title != null &&
          this.detail.title != "" &&
          this.detail.title != undefined
        ) {
          this.shareData.title = this.detail.title;
        }
      });
    },
    //分享
    share() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ["shareAppMessage", "shareTimeline"],
      });
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.work-container {
  width: 100%;

  background-color: #ffffff;
  .top {
    display: flex;
    flex-direction: column;
    padding-left: 20rpx;
    padding-right: 20rpx;
    .title {
      font-size: 1rem;
      font-weight: bold;
    }
    .flex-row {
      justify-content: space-between;
      margin-top: 10rpx;
      .container {
        .logo {
          width: 20rpx;
          height: 20rpx;
        }
        text {
          font-size: 0.5rem;
          margin-left: 10rpx;
        }
      }
    }
  }
  .content {
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 20rpx;
  }
  .bottom {
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: flex-end;
    .container {
      display: flex;
      align-items: center;
      .logo {
        width: 40rpx;
        height: 40rpx;
      }
      text {
        font-size: 0.8rem;
        margin-left: 10rpx;
      }
      .btn {
        border: none;
        background: none;
        &::after {
          border: 0px;
        }
        text {
          margin-left: 0px;
        }
      }
    }
  }
}
</style>
    